<template>
	<view class="box">
		<view class="trade">
			<view class="texts" :class="curr==0?'active':''" data-index="0" @tap="setCurr">
				论坛
			</view>
			<view class="texts" :class="curr==1?'active':''" data-index="1" @tap="setCurr">
				聊天
			</view>
		</view>
		<swiper style="height: 100vh;" :current="curr" @change="setCurr">
			<!-- 论坛界面 -->
			<swiper-item>
				<scroll-view class="outer-container" scroll-y="true" style="height: 100vh;">
					<u-list scroll-y="true">
						<!-- 轮播图 -->
						<u-swiper class="Carousel" :list="carouselList" indicator indicatorMode="line" circular
							height="350rpx" @click="toNews"></u-swiper>
						<!-- 功能 -->
						<view class="block">
							<view class="item" @click="toMypost">
								<u-icon name="file-text" color="#3C9CFF" size="60"></u-icon>
								<view style="font-size: 40rpx;">我的帖子</view>
							</view>
							<view class="item" @click="toMsg">
								<u-icon name="chat" color="#3C9CFF" size="60"></u-icon>
								<view style="font-size: 40rpx;">消息</view>
							</view>
						</view>

						<!-- 固定在右下角的元素,创作的加号 -->
						<view class="fixed-add" @click="toRelease">
							<view class="add">+</view>
						</view>
						<!-- 所有帖子 -->
						<view class="list-cell-user" v-for="(item, index) in contentList" @click="toDetail(item.id)">
							<view class="user">
								<image class="avatar" :src="item.avatar" mode="aspectFill"
									style="height: 70rpx;width: 70rpx;border-radius: 10rpx;margin:0 35rpx 0 0;">
								</image>
								<view class="name">
									{{item.username}}
								</view>
								<view class="time">
									{{item.time}}
								</view>
							</view>

							<view class="title">
								{{item.title}}
							</view>
						</view>
					</u-list>
				</scroll-view>
			</swiper-item>
			<!-- 聊天界面 -->
			<swiper-item>
				<scroll-view>
					<u-index-list :index-list="indexList">
						<template v-for="(item, indexOne) in itemArr">
							<!-- #ifdef APP-NVUE -->
							<u-index-anchor :text="indexList[indexOne]" activeColor="#3C9CFF"></u-index-anchor>
							<!-- #endif -->
							<u-index-item>
								<!-- #ifndef APP-NVUE -->
								<u-index-anchor :text="indexList[indexOne]">
								</u-index-anchor>
								<!-- #endif -->
								<view class="list-cell" v-for="(cell, index) in item" @click="toChat(indexOne,index)">
									<image :src="cell.avatar" mode="aspectFill"
										style="height: 70rpx;width: 70rpx;border-radius: 10rpx;margin:0 35rpx 0 0;">
									</image>
									{{cell.userName}}
								</view>
							</u-index-item>
						</template>
					</u-index-list>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		listPost,
	} from "@/api/post";

	import {
		listFriend,
	} from "@/api/friend";
	// 拼音的包
	import {
		pinyin
	} from 'pinyin-pro';

	import {
		// 导入mapState辅助函数
		mapState
	} from 'vuex';


	export default {
		data() {
			return {
				// 轮播图
				carouselList: [
					'https://allinwhat.oss-cn-beijing.aliyuncs.com/img-0.jpg',
					'https://allinwhat.oss-cn-beijing.aliyuncs.com/img-1.jpg',
					'https://allinwhat.oss-cn-beijing.aliyuncs.com/img-2.png'
				],

				//左右切换界面
				curr: 0,
				indexList: [],
				itemArr: [],
				// 论坛主体,所有帖子
				contentList: [{
					id: 0,
					avatar: '',
					username: '',
					title: '',
					time: ''
				}],

			}
		},
		onLoad() {
			// 获取贴子信息
			this.getPostList();
			// 获取好友list信息
			this.getFriendList()
		},
		methods: {
			// 获取所有帖子
			getPostList() {
				// 加载弹窗
				this.$modal.loading("正在加载数据");
				this.loading = true;
				listPost().then(response => {
					console.log(response.data);
					this.contentList = response.data
				})
			},
			// 获取当前用户的所有好友
			async getFriendList() {
				this.$modal.loading("正在加载数据");
				this.loading = true;
				// 清空之前的itemArr和indexList
				this.itemArr = [];
				this.indexList = [];
				try {
					const response = await listFriend();
					// 处理数据
					this.getListByPinyinFirstLetter(response.data);
				} catch (error) {
					console.error('获取好友列表失败', error);
				} finally {
					// 加载条消失
					this.loading = false;
					this.$modal.closeLoading()
				}
			},

			// 按拼音排列的算法
			getListByPinyinFirstLetter(data) {
				const newList = {}; // 键值对，key为firstLetter，value为item数组
				for (const item of data) {
					let firstLetter; // 首字母
					if (/[a-zA-Z]/.test(item.userName.charAt(0))) {
						// 如果是英文字母开头的直接使用大写首字母
						firstLetter = item.userName.charAt(0).toUpperCase();
					} else {
						const pinyinArray = pinyin(item.userName, {
							style: pinyin.STYLE_FIRST_LETTER, // 提取拼音首字母
						});
						if (pinyinArray.length > 0) {
							firstLetter = /[a-zA-Z]/.test(pinyinArray[0][0].toUpperCase()) ? pinyinArray[0][0]
								.toUpperCase() :
								"#"; // 获取拼音首字母并转换为大写
						} else {
							// 如果没有拼音首字母，则归类为#
							firstLetter = "#";
						}
					}
					// 若不存在该键则创建
					if (!newList[firstLetter]) {
						newList[firstLetter] = [];
					}
					newList[firstLetter].push(item);
				}
				// 仅对newList的键按字母顺序排序，#在所有其他字母后面
				const sortedKeys = Object.keys(newList).sort((a, b) => {
					if (a === '#') return 1;
					if (b === '#') return -1;
					return a.localeCompare(b);
				});
				// 通过有序的键，拿key从newList取值、赋值，得到有序的键值对
				const sortedNewList = {};
				for (const key of sortedKeys) {
					// sortedNewList[key] = newList[key];
					// 确保即使newList[key]只有一个元素，也作为一个数组添加
					const wrappedItems = newList[key].length > 1 ? newList[key] : [newList[key]];
					this.itemArr = this.itemArr.concat(wrappedItems);
				}
				// console.log(sortedNewList, sortedKeys);
				// 本地的字母list
				this.indexList = this.indexList.concat(sortedKeys)
				console.log(this.indexList);
				// 本地的带有字母的键值对
				// list.value = sortedNewList;
			},

			// 头部左右滑动的函数
			setCurr(e) {
				// console.log(e.detail.current)
				let thisCurr = e.detail.current || e.currentTarget.dataset.index || 0;
				// console.log(thisCurr)
				this.curr = thisCurr;

				// 当滑动到聊天界面（索引为1）时，调用getFriendList方法
				if (thisCurr === 1) {
					this.getFriendList();
				}
			},
			// 论坛主体
			scrolltolower() {
				this.loadmore()
			},

			// 跳转到发布帖子界面
			toRelease() {
				wx.navigateTo({
					url: "/pages/community/release/release"
				})
			},
			// 跳转到帖子详情界面
			toDetail(id) {
				wx.navigateTo({
					url: "/pages/community/detail/detail?postId=" + id
				})
			},
			// 跳转到我的帖子界面
			toMypost() {
				wx.navigateTo({
					url: "/pages/community/myPost/myPost"
				})
			},
			// 跳转到消息界面
			toMsg() {
				wx.navigateTo({
					url: "/pages/community/msg/msg"
				})
			},
			// 跳转到chat界面
			toChat(indexOne, index) {
				// console.log(indexOne,index);
				console.log(this.itemArr[indexOne][index].userId);
				var userId = this.itemArr[indexOne][index].userId
				if (this.itemArr[indexOne][index].userId != undefined) {
					wx.navigateTo({
						url: "/pages/community/chat/chat?userId=" + userId
					})
				}
			},
			// 跳转到新闻界面
			toNews(index){
				console.log(index);
				wx.navigateTo({
					url: "/pages/community/news/news?index="+index
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		display: flex;
		flex-direction: column;
		overflow-y: auto;

		.trade {
			width: 100%;
			color: #007AFF;
			overflow: auto;
		}

		.trade view {
			text-align: center;
			padding-left: 25upx;
			width: 46%;
			float: left;
		}

		.trade .texts.active {
			width: 46%;
			border-bottom: 8upx solid #3C9CFF;
		}

		// 论坛界面
		.outer-container {
			.notice {
				width: 100%;
				height: 50rpx;
				background-color: orange;
				/* 固定在顶部 */
				position: fixed;
				/* 层级 */
				z-index: 1;
			}

			.block {
				height: 200rpx;
				width: 720rpx;
				margin: 50rpx auto;
				background-color: #fffff;
				margin-top: 30rpx;
				border-radius: 20rpx;
				border: 3rpx #f3f4f7 solid;
				box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.5);
				/* 上下左右都有阴影，数值可根据需要调整 */

				display: flex;
				// flex-wrap: wrap;
				flex-wrap: nowrap;
				justify-content: space-around;
				align-items: center;

				.item {
					width: calc((720rpx - 2 * 20rpx) / 3);
					/* 计算每项宽度，减去两边间隔，假设每行3个item */
					height: 170rpx;
					margin: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}
			}

			// 创作的加号
			.fixed-add {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50rpx;
				background-color: #3C9CFF;
				font-size: 80rpx;
				/* 固定在顶部 */
				position: fixed;
				/* 层级 */
				z-index: 1;
				bottom: 100rpx;
				right: 0;
				position: fixed;
				margin: 10rpx 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				// text-align: center;
				.add {
					margin-bottom: 10rpx;
					color: white;
				}
			}
		}



		// 好友列表
		.list-cell {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			width: 100%;
			padding: 10rpx 24rpx;
			overflow: hidden;
			color: #323233;
			font-size: 35rpx;
			line-height: 24rpx;
			background-color: #fff;
		}

		// 论坛主体
		.list-cell-user {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			width: 100%;
			padding: 10rpx 24rpx;
			overflow: hidden;
			color: #323233;
			font-size: rpx;
			line-height: 24rpx;
			background-color: #fff;
			flex-direction: column;
			/* 将flex-direction设置为column，使得子元素垂直排列 */
			margin: 15rpx 0;

			.user {
				display: flex;
				align-items: center;
				width: 100%;

				.avatar {
					height: 70rpx;
					width: 70rpx;
					border-radius: 10rpx;
					margin-right: 35rpx;
				}

				.name {
					flex: 1;
					margin-left: 10rpx;
					font-size: 40rpx;
					font-weight: 500;
					/* 添加左侧边距，与头像间隔开 */
				}

				.time {
					text-align: right;
					/* 将时间靠右对齐 */
					margin-top: 5rpx;
					color: gray;
					/* 分离时间与用户信息的距离 */
				}
			}

			.title {
				width: 100%;
				flex: 1;
				margin-top: 10rpx;
				/* 使标题与上方元素留出一定距离 */
				text-align: left;
				/* 明确指定标题在水平方向上左对齐 */
				font-size: 35rpx;
				margin: 20rpx 0;
				padding: 15rpx 0 0 25rpx;
				/* 默认情况下标题靠左 */
			}
		}

	}
</style>